<!-- 弹窗 详情 -->
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus';

import { DUTY_STATUS_OPTIONS, WORKER_TYPE_OPTIONS } from '@/config/enum-map';
import type { WhManagerSystemSystemUserUpdateUsingPostBody } from '@/genapi/wh';
import {
  whManagerSystemSystemUserSaveUsingPost,
  whManagerSystemSystemUserUpdateUsingPost,
} from '@/genapi/wh';
import { useAsync } from '@/hooks/use-async';
import { useCompanyStore } from '@/stores/company';

import { injectState } from '../state';

defineOptions({ name: 'DetailDialog' });

const { page } = injectState()!;

const companyStore = useCompanyStore();

const dialogRef = shallowRef<InstanceType<GlobalComponents['PromiseDialog']>>();

const formRef = shallowRef<FormInstance>();

const dialogType = ref<'add' | 'edit' | 'detail' | string>();

const titleMap: Record<string, string> = {
  add: '新增',
  edit: '编辑',
  detail: '详情',
};

const beforeClose = async () => {
  if (dialogType.value !== 'detail') {
    await ElMessageBox.confirm('确认关闭？');
  }
};

const trigger = async (type = 'add', value = {} as any) => {
  dialogType.value = type;
  model.value = JSON.parse(JSON.stringify(value)) as any;
  await dialogRef.value?.open();
};

defineExpose({
  trigger,
});

const model = ref<WhManagerSystemSystemUserUpdateUsingPostBody & Record<string, any>>({} as any);

const rules: FormRules<typeof model.value> = {
  userName: { required: true, message: '请输入登录用户名', trigger: 'blur' },
  userPassword: { required: true, message: '请输入登录密码', trigger: 'blur' },
  realName: { required: true, message: '请输入真实姓名', trigger: 'blur' },
  phone: { required: true, message: '请输入联系电话', trigger: 'blur' },
  entryDate: { required: true, message: '请选择入职时间', trigger: 'blur' },
  dutyStatus: { required: true, message: '请选择在职状态', trigger: 'blur' },
  idNum: { required: true, message: '请输入身份证号', trigger: 'blur' },
  sex: { required: true, message: '请选择性别', trigger: 'blur' },
};

const { execute, isLoading } = useAsync(async () => {
  await formRef.value?.validate();
  await ElMessageBox.confirm('确认提交？', '提示', {
    type: 'warning',
  });
  const data = {
    ...model.value,
    relatedId: companyStore.companyInfo?.id,
    type: '1',
  };
  if (data.id) {
    await whManagerSystemSystemUserUpdateUsingPost({
      data,
    });
  } else {
    await whManagerSystemSystemUserSaveUsingPost({ data });
  }
  page.execute();
  ElMessage.success('提交成功');
  dialogRef.value?.complete();
});
</script>

<template>
  <PromiseDialog
    ref="dialogRef"
    :title="titleMap[dialogType!]"
    :before-close="beforeClose"
    h="584px!"
    w="707px!"
  >
    <el-scrollbar>
      <el-form
        ref="formRef"
        :disabled="isLoading || dialogType === 'detail'"
        :model="model"
        :rules="rules"
        inline
        label-position="top"
      >
        <el-form-item label="登录用户名" prop="userName" w="100%!">
          <el-input v-model="model['userName']" clearable placeholder="请输入登录用户名" />
        </el-form-item>
        <el-form-item  label="登录密码" prop="userPassword" w="100%!">
          <el-input v-model="model['userPassword']" clearable placeholder="请输入登录密码" />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName" w="100%!">
          <el-input v-model="model['realName']" clearable placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="sex" w="100%!">
          <el-radio-group v-model="model.sex">
            <el-radio value="1">男</el-radio>
            <el-radio value="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone" w="100%!">
          <el-input v-model="model['phone']" clearable placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="所在部门" prop="deptId" w="100%!">
          <el-input v-model="model['deptId']" clearable placeholder="请输入所在部门" />
        </el-form-item>
        <el-form-item label="员工职务" prop="job" w="100%!">
          <el-input v-model="model['job']" clearable placeholder="请输入员工职务" />
        </el-form-item>
        <el-form-item label="员工工种" prop="workerType" w="100%!">
          <el-select-v2
            v-model="model['workerType']"
            clearable
            :options="WORKER_TYPE_OPTIONS"
            placeholder="请选择员工工种"
          />
        </el-form-item>
        <el-form-item label="入职时间" prop="entryDate" w="100%!">
          <el-date-picker
            v-model="model['entryDate']"
            class="w-100%!"
            value-format="YYYY-MM-DD"
            clearable
            placeholder="请选择入职时间"
          />
        </el-form-item>
        <el-form-item label="在职状态" prop="dutyStatus" w="100%!">
          <el-select-v2
            v-model="model['dutyStatus']"
            clearable
            :options="DUTY_STATUS_OPTIONS"
            placeholder="请选择在职状态"
          />
        </el-form-item>
        <el-form-item label="身份证号" prop="idNum" w="100%!">
          <el-input v-model="model['idNum']" clearable placeholder="请输入身份证号" />
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template v-if="dialogType !== 'detail'" #footer>
      <el-button @click="dialogRef?.close()">取消</el-button>
      <el-button type="primary" :is-loading="isLoading" @click="execute()">确认</el-button>
    </template>
  </PromiseDialog>
</template>
